<template>
  <view class="page">
    <u-sticky bgColor="#fff">
      <view class="search-box">
        <view class="search-input">
          <image
            class="search-input-icon"
            :src="require('@/static/img/search-icon2.png')"
          />
          <input placeholder="查询" class="search-input-put" />
          <view class="search-input-btn">搜索</view>
        </view>
      </view>
      <u-tabs
        :list="list"
        lineColor="#1AC678"
        itemStyle=" height: 60px;padding: 0 20px;"
        :activeStyle="{
          color: '#1AC678',
          fontWeight: 'bold',
        }"
        :inactiveStyle="{
          color: '#202020',
          fontWeight: 'bold',
        }"
      ></u-tabs>
    </u-sticky>
    <view class="main">
      <view class="item" v-for="(item, index) in 10" :key="index">
        <image
          class="item-pic"
          src="https://img2.baidu.com/it/u=1839967080,1189463936&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
          mode="aspectFill"
        />
        <view class="item-text">病虫害案例一</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "全部",
        },
        {
          name: "虫/螨害",
        },
        {
          name: "病害",
        },
        {
          name: "其他症状",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    click(item) {
      console.log("item", item);
    },
    gotoPage(value) {
      uni.navigateTo({
        url: value,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  // height: 100vh;
  background: #f6f6f6;
}

.search-box {
  width: 100%;
  padding: 0 35rpx;
  height: 254rpx;
  background: #1ac678;
  padding-top: 108rpx;
  z-index: 20;
}
.search-input {
  width: 100%;
  height: 70rpx;
  border-radius: 53px 53px 53px 53px;
  margin: 0 auto;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 4rpx;
  padding-left: 40rpx;
  &-icon {
    width: 35rpx;
    height: 35rpx;
    margin-right: 25rpx;
  }
  &-put {
    flex: 1;
    font-size: r26rpx;
  }
  &-btn {
    width: 105rpx;
    height: 63rpx;
    background: #1ac678;
    border-radius: 53rpx;
    font-size: 28rpx;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.main {
  padding: 35rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    position: relative;
    width: 324rpx;
    height: 324rpx;
    background: #ffffff;
    border-radius: 14rpx;
    margin-bottom: 30rpx;
    &-pic {
      width: 324rpx;
      height: 324rpx;
      background: #ffffff;
      border-radius: 14rpx;
    }
    &-text {
      position: absolute;
      left: 21rpx;
      bottom: 21rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
.btn-box {
  position: fixed;
  left: 0;
  bottom: 33rpx;
  width: 100%;
  // position: absolute;
  // bottom: 108rpx;
}
.btn {
  width: 697rpx;
  background: #1ac678;
  border-radius: 54rpx;
  margin: 0 auto;
  &-text {
    font-size: 32rpx;
    font-weight: 400;
    color: #ffffff;
  }
}
</style>
